<template>
  <div>
      <router-view></router-view>
      <router-link to="" v-for="(v,i) in arr" :key="i">
      <img :src="v.img"/>
      <p>{{v.text}}</p> 
      </router-link>        
  </div>
</template>

<script>
export default {
data() {
  return {
    arr:[
 {
  img:"face/1.webp",
  text:"面部精华"
},

 {
  img:"face/2.webp",
  text:"滋养乳霜"
},   
     {
  img:"face/3.webp",
  text:"眼部护理"
}, 
      {
  img:"face/4.webp",
  text:"基础爽肤"
},
      {
  img:"face/5.webp",
  text:"基础防晒"
},
      {
  img:"face/6.webp",
  text:"卸妆清洁"
},
      {
  img:"face/7.webp",
  text:"面膜呵护"
},
{
  img:"face/8.webp",
  text:"洁面清洁"
}
      ]
    
  }
},
}
</script>

<style scoped>
div{
    width: 100%;
    height: 1rem; 
    display: flex;
     overflow-y: auto;    
}
a{
    flex-shrink:0;
  margin-left:0.15rem ;
}
img{
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    margin:0.1rem auto;
}
</style>